<!--
 * @Author: hu_binbin
 * @Date: 2021-06-15 10:43:24
 * @LastEditTime: 2021-08-02 10:47:30
 * @Description: 变电站选择、变电站下载
-->

<template>
  <div class="selectSubstation">
    <van-nav-bar
      right-text="关闭"
      right-arrow 
      left-arrow 
      title="选择变电站"
      @click-right="close"
      @click-left="close"
    >
    </van-nav-bar>
    <van-search v-model.trim="subName" @clear="cancel" clearable @input="focus" shape="round" background="#fff" placeholder="请选择变电站">
		</van-search>
    <van-list class="tabList" 
      v-model="loading"
      :finished="finished">
      <van-cell
        v-for="(item,index) in showSubList"
        :key="index">
        <div slot="title">
          <span :id="'page'+item.id" >{{ item.subName }}</span>
          <van-button 
            type="info"
            size="small"
            loading-type="spinner"
            :class="{blue: item.check}"
            @click="substaionBtnClickEvent(item)" 
            style="float:right"
            plain>
            选择
          </van-button>  
        </div>
      </van-cell>
      <van-cell v-if="showSubList.length==0" style="text-align: center;" title="无数据"></van-cell>
    </van-list>
  </div>
</template>

<script>
import {getSubstationList} from "../modules/tour/api/common"
const PinyinEngine = require('pinyin-engine');
export default {
  name: 'SelectSubstation',
  props: {
    subId:{//设备信息
      type: String,
      default:""
    },
  }, 
  data () {
    return {
      activeIndex: 1, //当前活动项      
      showSubList:[],
      //subList: [],  
      subName: "",  
      substationList: [], //当前班级下所有变电站列表
      loading: true, 
      finished: true, //变电站列表是否加载完成
      userInfo: {},
      pinyinEngineByShow: null
    }
  },
  computed: {
    
  },
  methods: {
    focus() {
      this.showSubList = this.pinyinEngineByShow.query(this.subName)
    },
    //搜索框取消按钮触发
    cancel() {
      this.showSubList = this.pinyinEngineByShow.query("")
    },
    //关闭窗口事件   
    close() {
      this.$emit('close')
    },
    /**
     * @description: 变电站电压等级切换事件
     */ 
    powerLevelChangeEvent() {
      
    },
    /**
     * @description: 变电站项操作：选择
     * @param {Object} item 变电站信息
     */    
    substaionBtnClickEvent(item) {
      var powerLevelName = item.powerLevelName;
      var index = item.powerLevelName.indexOf("流");
      if(index != 1) {
        powerLevelName = item.powerLevelName.slice(index+1);
      }
      let substaionInfo = {
            "substationId": item.id,
            "substationName": item.subName,
            "powerLevelName": powerLevelName
          }
      console.log("substaionInfo",item)
      this.$emit('selected', substaionInfo)
        // 将选择的变电站保存到localStorage中
      localStorage.setItem(substaionInfo, JSON.stringify(substaionInfo));
    },
    /**
     * @description: 查询变电站列表
     * @param {*}
     * @return {*}
     */
    querySubStation() {
        var self = this;
        this.powerLevels = [];
        var params = {
					keyword: this.subName,//变电站名称
          roleCode: "",
          orgId: this.userInfo.orgId,
          userId: this.userInfo.userId,
				};
				console.log("params",params)
				this.$Toast.loading({
						duration: 0,//展示时长 0不会消失
						message: "正在获取变电站...",
						forbidClick: true,//是否禁止背景点击
						overlay: true//是否显示背景遮罩层
					})
				//编辑页面
				getSubstationList(params).then(data => {
					self.$Toast.clear();
					if(data.success) {
						self.$Toast.success(data.msg)
            var selSub = data.data;
            if(selSub && selSub.length > 0) {
              //self.subList = selSub;
              selSub.forEach(item => {
                  if(item.subId == self.subId){
                    item["check"] = true;
                  }else{
                    item["check"] = false;
                  }
              })
              self.pinyinEngineByShow = new PinyinEngine(selSub, ["subName"]);
              self.showSubList = selSub;
            }else{
              //self.subList = [];
              self.showSubList = [];
            }
					}else{
						self.$Toast.fail(data.msg)
					}
				}).catch(err => {
					self.$Toast.fail(err)
				})
    }
  },   
  mounted() {
    var userInfo = localStorage.getItem("userInfo");
		this.userInfo = JSON.parse(userInfo);
    //设置加载中状态
    this.loading = true
    this.finished = true
    this.querySubStation();
  }
}
</script>

<style scoped>
.selectSubstation {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tabList {
  height:90%;
  overflow-y:auto;
}
.van-nav-bar {
  z-index: 10;
  background: linear-gradient(to right, #036257, #057b54);
}
/deep/ .van-nav-bar__title {
  color: #fff !important;
  font-size: 20px !important;
}
/deep/ .van-nav-bar__text, .van-nav-bar .van-icon {
  color: #fff !important;
  font-size: 16px !important;
}
.blue{
  background:#3CDAA8;
}
</style>
